<template>
  <a-row>
    <a-col :span="24">
      <a-card>
        <a-space>
          <a-button type="primary" @click="addData">
            <component is="icon-plus"/>
            添加分类
          </a-button>
        </a-space>
        <a-alert style="margin-top: 10px;" type="warning">温馨提示：如果想对一级分类进行排序,请折叠菜单！</a-alert>
        <div style="margin-top: 20px">
          <a-table v-if="tableData.length" :data="tableData"  :default-expand-all-rows="true">
            <template #columns>
              <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
                <template v-if="item.title==='更新时间'" #cell="{ record }">
                  {{ moment(record["UpdateTime"]).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-if="item.title==='上级'" #cell="{ record }">
                  {{ getTypeName(record.ParentId) }}
                </template>
              </a-table-column>
              <a-table-column title="操作">
                <template #cell="{ record,rowIndex }">
                  <a-space>
                    <a @click="editData(record)">编辑</a>
                    <a-popconfirm :content="`确诊删除 ${record['TypeName']} ?`" @ok="delData(record)" okText="删除" cancelText="取消">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
  <a-modal :title="boolData.isAdd?'添加分类':'编辑分类'" v-model:visible="boolData.isShow" :footer="null" @cancel="boolData.isShow===false">
    <a-form>
      <a-form-item label="上级">
        <a-tree-select v-model="addValue.ParentId" :data="tableData2" :field-names="{ key: 'TypeId',
      title: 'TypeName'}" :filter-tree-node="filterTreeNode"  placeholder="按分类筛选,支持输入搜索分类" allow-search allow-clear style="width:300px;"/>
      </a-form-item>
      <a-form-item label="类型名称">
        <a-input v-model="addValue.TypeName" placeholder="类型名称"/>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="saveData">{{ boolData.isAdd ? "添加" : "编辑" }}</a-button>
          <a-button @click="boolData.isShow=false">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import {filterTreeNode} from "@/until/tool.js";

export default {
  name: "solveType",
  data() {
    return {
      moment,
      columns: [
        {
          title: "名称",
          dataIndex: "TypeName",
        },
        {
          title: "更新时间",
          dataIndex: "UpdateTime",
          slotName: "UpdateTime",
        },
      ],
      addValue: {
        TypeId: 0,
        TypeName: "",
        ParentId: 99,
      },
      boolData: {
        isShow: false,
        isAdd: false,
      },
      tableData: [],
      resData: [],
      tableData2: [{
        TypeId: 99,
        TypeName: "顶级",
        ParentId: 1,
        CreateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        UpdateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      }],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    filterTreeNode,
    async getData() {
      const res = await this.$Http.newsType();
      if (res["Data"]) {
        this.tableData = [...this.$XEUtils.treeOneData(res["Data"], "TypeId", "ParentId", "children")];
        this.tableData2 = [{
          TypeId: 99,
          TypeName: "顶级",
          ParentId: 1,
          CreateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
          UpdateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        }, ...this.tableData];
      }
    },
    addData() {
      this.boolData.isAdd = true;
      this.boolData.isShow = true;
      this.addValue = {
        TypeName: "", ParentId: 99,
      };
    },
    editData(data) {
      this.boolData.isAdd = false;
      this.boolData.isShow = true;
      this.addValue = data;
      if (this.addValue.ParentId === 1) {
        this.addValue.ParentId = 99
      }
    },
    async saveData() {
      if (this.addValue.ParentId === 99) {
        this.addValue.ParentId = 1
      }
      if (this.boolData.isAdd) {
        // 添加
        await this.$Http.newsTypeAdd({TypeName: this.addValue.TypeName, ParentId: this.addValue.ParentId});
      } else {
        // 编辑
        await this.$Http.newsTypeEdit({TypeId: this.addValue.TypeId, TypeName: this.addValue.TypeName, ParentId: this.addValue.ParentId});
      }
      this.$message.success(this.isAdd ? "添加" : "编辑" + "成功!");
      await this.getData();
      this.boolData.isShow = false;
    },
    async delData(data) {
      await this.$Http.newsTypeDel({TypeId: data["TypeId"]});
      this.$message.success("删除成功!");
      await this.getData();
      this.boolData.isShow = false;
    },
    getTypeName(typeId) {
      let name = '顶级'
      this.tableData.forEach((d) => {
        if (d.TypeId === typeId) {
          name = d.TypeName
        }
      })
      return name;
    },
  },

};
</script>

<style scoped>

</style>
